<template>
  <view class="tn-count-scroll" :class="[countScrollClass]" :style="countScrollStyle">
    <view
      v-for="(item, index) in columns"
      :key="index"
      class="tn-count-scroll__box"
    >
      <view
        class="tn-count-scroll__column"
        :style="countScrollColumnStyle(index)"
      >
        <view
          v-for="(columnItem, columnIndex) in item"
          :key="columnIndex"
          class="tn-count-scroll__item"
        >
          {{ columnItem }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { countScrollProps, CountScrollSeparator } from '../../../types/tn-count-scroll'
import { computed, watch, CSSProperties, ref } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'

const props = defineProps(countScrollProps)

const { generateColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '')
// 监听颜色变化实时修改颜色对应的属性
watch(() => props.color, (nVal) => {
  componentColorInfo = generateColorInfo(nVal)
})

// countScroll分隔符
const separator = computed<CountScrollSeparator>(() => {
  return Object.assign({
    decimal: '.',
    thousandths: ''
  }, props?.separatorOption || {})
})

// countScroll样式
const countScrollStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (componentColorInfo.style?.color) style.color = componentColorInfo.style.color
  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
    style.height = style.fontSize
  }
  return style
})
// countScrollColumn样式
const countScrollColumnStyle = computed<(index: number) => CSSProperties>(() => {
  return (index: number) => {
    let style: CSSProperties = {}
    if (props?.duration) style.transition = `all ${Number(props.duration) / 1000}s ease`
    style.transform = `translateY(-${(valueIndex.value?.[index] || 0) * 10}%)`
    return style
  }
})

// countScroll对应的类
const countScrollClass = computed<string>(() => {
  let clazz: string[] = []
  if (componentColorInfo.class.length > 0) clazz.push(...componentColorInfo.class)
  if (props?.bold) clazz.push('tn-text-bold')
  return clazz.join(' ')
})


// 保存对应数值对应的位置
let valueIndex = ref<number[]>([])
// 每一列的数据
let columns = ref<string[][]>([])

// 初始化列数据
const initColumn = () => {
  const value: string = (props?.value || 0) + ''
  const rows: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
  let length = value.length
  let columnData: string[][] = []
  let indexData: number[] = []
  valueIndex.value = Array(length).fill(0)
  columns.value = Array(length).fill([])
  for (let i = 0; i < length; i++) {
    if (Object.values(separator.value).includes(value[i])) {
      columnData.push([value[i]])
      indexData.push(0)
    } else {
      columnData.push(rows)
      const index = rows.findIndex(item => item === value[i])
      indexData.push(index !== -1 ? index : 0)
    }
  }
  columns.value = columnData
  setTimeout(() => {
    valueIndex.value = indexData
  }, 20);
}
initColumn()
watch(() => props.value, () => {
  initColumn()
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';
.tn-count-scroll {
  display: inline-flex;
  align-items: center;
  font-size: $tn-font-size;
  height: calc($tn-font-size);
  line-height: 1;

  &__box {
    height: 100%;
    overflow: hidden;
  }

  &__column {
    // height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transition: all 1.5s ease;
  }

  &__item {
    // height: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
